<template>
  <div>
    <el-table
      :data="tableData"
      stripe
      style="width: 100%"
      row-class-name="custom-row"
    >
      <el-table-column label="序号" class-name="cell-style">
        <template slot-scope="scope">
          {{ scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column prop="username" label="登录账户" class-name="cell-style">
      </el-table-column>
      <!-- 1管理员 其他普通用户 -->
      <el-table-column prop="type" label="角色类型" class-name="cell-style">
        <template slot-scope="scope">
          {{ scope.row.type === 1 ? "管理员" : "普通用户" }}
        </template>
      </el-table-column>
      <el-table-column prop="email" label="邮箱" class-name="cell-style">
      </el-table-column>
      <el-table-column label="登录时间" class-name="cell-style">
        <template slot-scope="scope">
          {{ formatDate(scope.row.createtime) }}
        </template>
      </el-table-column>
      <el-table-column label="操作" width="200" class-name="cell-style">
        <template slot-scope="scope">
          <el-button type="danger" @click="handleClick(scope.row.id)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <Pagination
      :componentTotal="activityTotal"
      :page="tasklisForm.page"
      @changeRows="setRows"
      @changePage="setPage"
    >
    </Pagination>
  </div>
</template>

<script>
import Pagination from "@/components/Pagination";
import moment from 'moment';

export default {
  components: { Pagination },
  props: {
    type: {
      type: String,
      required: true
    },
    username: {
      type: String,
      required: true
    },
    startDate: {
      type: String,
      required: true
    },
    endDate: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      id: "",
      tasklisForm: {
        limit: 9,
        page: 1,
      },
      activityTotal: 0,
      tableData: [],
    };
  },
  methods: {
    // 分页器
    setRows(val) {
      this.tasklisForm.limit = val;
      this.getMenuData();
    },
    setPage(val) {
      this.tasklisForm.page = val;
      this.getMenuData();
    },
    handleClick(id) {
      console.log(id);
      this.id = id;
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.delLoginData();
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    async getMenuData() {
      try {
        const params = {
          username: this.username || '',
          type: this.type || '',
          startDate: this.startDate || '',
          endDate: this.endDate || '',
          currPage: this.tasklisForm.page - 1,
          pageNum: this.tasklisForm.limit
        };

        const { data: res } = await this.axios.get('users/getLoginData', { params });
        console.log(res);
        this.tableData = res.data || [];
        this.activityTotal = res.total || 0;
        this.$emit('refreshData'); // 触发自定义事件
      } catch (error) {
        console.error(error);
        this.$message.error("请求失败: " + error.message);
      }
    },
    async delLoginData() {
      try {
        const params = {
          id: this.id,
          token: sessionStorage.token || ''
        };

        const { data: res } = await this.axios.get('users/delLoginData', { params });
        console.log(res);
        this.$message.success("删除成功!");
        this.getMenuData();
      } catch (error) {
        console.error(error);
        this.$message.error("请求失败: " + error.message);
      }
    },
    formatDate(date) {
      if (!date) return '';
      return moment(date).format('YYYY-MM-DD HH:mm:ss');
    }
  },
  mounted() {
    this.getMenuData();
  },
};
</script>

<style>
.buttn {
  color: #fff;
  font-size: 12px;
  background-color: #20a0ff;
  border-color: #20a0ff;
}

.custom-row {
  height: 45px;
}

.cell-style {
  font-weight: bold;
  text-align: center;
}
</style>